<!--
  -    Copyright (c) 2018-2025, gewu All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the gewucn.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: gewu
  -->
<template>
  <div class="execution">
    <div class='execution-box'>
      <el-card class="box-card btn-search page-search">
        <div slot="header" class="clearfix">
          <div class="btn-box">
            <el-button
              type="info"
              icon="el-icon-refresh-left"
              @click="refreshChange()"
            ></el-button>

            <el-button type="check" icon="el-icon-download" @click="exportExcel"
              >导出</el-button
            >
          </div>
          <div class="icon-box">
            <i class="el-icon-search" @click="searchShow"></i>
            <i class="el-icon-refresh" @click="refreshChange"></i>
            <i class="el-icon-goods"></i>
            <i class="el-icon-setting" @click="columnShow"></i>
            <i class="icon-zuixiaohua" />
          </div>
        </div>
      </el-card>
      <basic-container>
        <el-row :span="24">
          <el-col :xs="24" :sm="24" :md="16" class="user__main">
            <IconTitle
              style="margin-top: 0px"
              class="selfTitle"
              title="设备列表"
              imgUrl="yunwei"
            >
              <span class="slot">设备记录表</span>
            </IconTitle>
            <el-table
              :data="tableData"
              :header-cell-style="{
                background: '#f8f8f9',
                color: '#606266',
              }"
              style="width: 100%; margin-top: 10px"
              @selection-change="deviceSelection"
            >
              <el-table-column type="selection" align="center" width="55" />

              <el-table-column prop="deviceNum" align="center" label="设备编号">
              </el-table-column>
              <el-table-column
                prop="deviceName"
                align="center"
                label="设备名称"
                width="180"
              >
              </el-table-column>
              <el-table-column prop="location" align="center" label="位置">
              </el-table-column>
              <el-table-column
                prop="specification"
                align="center"
                label="规格型号"
              >
              </el-table-column>
            </el-table>
            <div style="text-align: right; margin-top: 20px">
              <el-pagination
                @size-change="sizeChange"
                :current-page.sync="page.currentPage"
                :page-sizes="[10, 20]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                class="pagination"
              >
              </el-pagination>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8" class="user__tree">
            <IconTitle
              style="margin-top: 0px"
              class="selfTitle"
              title="设备图片"
              imgUrl="yunwei"
            >
              <span class="slot">品牌管理</span>
            </IconTitle>

            <div class="button-box">
             
               <el-input style='margin-bottom:10px;width:80%' @focus="selctDemo" size='mini' placeholder="选择模版" v-model="seltext">
    <template slot="append">
      <span @click="selctDemo"> {{
                demo ? "更换模版" : "选择模版"
              }}</span>
     </template>
  </el-input>
  </br>
              <el-button
                type="primary"
                @click="submitForm"
                :disabled="multiple"
                size="mini"
                >预览</el-button
              >
              <el-button size="mini" v-print="'#printMe'" :disabled="multiple||!look"
                >打印</el-button
              >
            </div>
            <div class="demo-box dia-demo" id="printMe">
              <div v-if="demo == '1' && look">
                <div
                  class="demo-item ima-item1"
                  v-for="(item, index) in accountSel"
                >
                  <img class="code-imge" src="/images/code.png" alt="" />
                  <span class="title">{{ item.deviceName }}</span>
                </div>
              </div>
              <div v-if="demo == '2' && look">
                <div
                  class="demo-item ima-item2"
                  v-for="(item, index) in accountSel"
                >
                  <b>{{ item.deviceName }}</b>
                  <p>{{ item.deviceNum }}</p>
                  <div class="info">
                    <div class="info-left">
                      <p>
                        <span>资产编号：</span>
                        <span :title="item.assetNum" class="sheng">{{
                          item.assetNum
                        }}</span>
                      </p>
                      <p>
                        <span>资产类别：</span>
                        <span :title="item.category" class="sheng">{{
                          item.category
                        }}</span>
                      </p>
                      <p>
                        <span>规格型号：</span>
                        <span :title="item.specification" class="sheng">{{
                          item.specification
                        }}</span>
                      </p>
                      <p>
                        <span>存放地点：</span>
                        <span :title="item.location" class="sheng">{{
                          item.location
                        }}</span>
                      </p>
                      <p>
                        <span>管理人员：</span>
                        <span :title="item.liableUser" class="sheng">{{
                          item.liableUser
                        }}</span>
                      </p>
                    </div>
                    <div class="ima-box">
                      <img class="code-imge" src="/images/code.png" alt="" />
                    </div>

                  </div>
                </div>
              </div>
              <div v-if="demo == '3' && look">
                <div
                  class="demo-item ima-item3"
                  v-for="(item, index) in accountSel"
                >
                  <div class="info-box">
                    <div class="ff">
                      <p>{{ item.deviceNum }}</p>
                      <b>{{ item.deviceName }}</b>
                    </div>
                    <div class="freen">
                      <div class="ima3-box">
                        <img class="code-imge" src="/images/code.png" alt="" />
                      </div>
                      <span class="title">{{ item.location }}</span>
                    </div>
                  </div>
                  <span class="title">{{ item.deviceName }}</span>
                </div>
              </div>
              <div v-if="demo == '4' && look">
                <div
                  class="demo-item ima-item4"
                  v-for="(item, index) in accountSel"
                >
                  <div class="info4-box">
                    <div class="ima4-box">
                      <img class="code-imge" src="/images/code.png" alt="" />
                    </div>
                    <span class="title">{{ item.deviceNum }}</span>
                  </div>
                  <span class="title">{{ item.deviceName }}</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </basic-container>
    </div>
    <el-dialog
      title="选择模版"
      :visible.sync="dialogImageVisible"
      width="1090px"
      append-to-body
    >
      <!-- <div class="tab-box">
        <span
          :class="index === selected ? 'active' : 'item'"
          @click="changeTab(index)"
          v-for="(item, index) in selectLabel"
          >{{ item }}</span
        >
      </div> -->
      <div class="dia-demo">
        <div class="demo-item ima-item1" @click="selectItem(1,'普通二维码')">
          <img class="code-imge" src="/images/code.png" alt="" />
          <span class="title">普通二维码</span>
        </div>
        <div class="demo-item ima-item2" @click="selectItem(2,'彩色模版1')">
          <b>固定资产标签</b>
          <p>某某铁路集团第二项目部</p>
          <div class="info">
            <div class="info-left">
              <p><span>资产编号：</span>DNZJ-123</p>
              <p><span>资产名称：</span>小米电视</p>
              <p><span>规格型号：</span>redmiBook</p>
              <p><span>存放地点：</span>综合办公室</p>
              <p><span>管理人员：</span>张无位</p>
            </div>
            <div class="ima-box">
              <img class="code-imge" src="/images/code.png" alt="" />
            </div>
          </div>
                  <span class="title">彩色模版1</span>

        </div>
        <div class="demo-item ima-item3" @click="selectItem(3,'彩色竖版4')">
          <div class="info-box">
            <div class="ff">
              <p>草料二维码</p>
              <b>配电箱巡检</b>
            </div>
            <div class="freen">
              <div class="ima3-box">
                <img class="code-imge" src="/images/code.png" alt="" />
              </div>
              <span class="title">A栋1楼 西侧1</span>
            </div>
          </div>
          <span class="title">彩色竖版4</span>
        </div>
        <div class="demo-item ima-item4" @click="selectItem(4,'经典样式1')">
          <div class="info4-box">
            <div class="ima4-box">
              <img class="code-imge" src="/images/code.png" alt="" />
            </div>
            <span class="title">TDT@090</span>
          </div>
          <span class="title">经典样式1</span>
        </div>
        <!-- <div class="demo-item" @click="selectItem(5)"></div>
        <div class="demo-item" @click="selectItem(6)"></div>
        <div class="demo-item" @click="selectItem(7)"></div>
        <div class="demo-item" @click="selectItem(8)"></div>
        <div class="demo-item" @click="selectItem(9)"></div>
        <div class="demo-item" @click="selectItem(10)"></div>
        <div class="demo-item" @click="selectItem(11)"></div>
        <div class="demo-item" @click="selectItem(12)"></div>
        <div class="demo-item" @click="selectItem(13)"></div>
        <div class="demo-item" @click="selectItem(14)"></div>
        <div class="demo-item" @click="selectItem(15)"></div>
        <div class="demo-item" @click="selectItem(16)"></div> -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { fetchList, getObj } from "@/api/ems/equipment/account";
import { tableOption } from "@/const/crud/ems/equipment/print";
import printHtml from "print-js";
import { mapGetters } from "vuex";
import IconTitle from "@/components/icon-title/index.vue";
export default {
  name: "emsdeviceaccount",
  components: {
    IconTitle,
  },
  data() {
    return {
      tableData: [],
      searchForm: {}, // 查询参数
      single: true, // 非单个禁用
      multiple: true, // 非多个禁用
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      ids: [],
      demo: "",
      seltext: "",
      multiple: true, //多个禁止
      accountSel: [],
      dialogImageVisible: false,
      selectLabel: ["全部标签", "彩色标签", "黑色标签"],
      selected: 0,
      look: false,
    };
  },
  computed: {
    ...mapGetters(["permissions", "theme"]),
    permissionList() {
      return {
        addBtn: this.vaildData(
          this.permissions.ems_emsdeviceaccount_add,
          false
        ),
        delBtn: this.vaildData(
          this.permissions.ems_emsdeviceaccount_del,
          false
        ),
        editBtn: this.vaildData(
          this.permissions.ems_emsdeviceaccount_edit,
          false
        ),
      };
    },
  },
  created() {
    this.getList(this.page);
  },
  mounted() {},
  methods: {
    changeTab(val) {
      this.selected = val;
    },

    deviceSelection(selection) {
      this.accountSel = selection;
      this.multiple = !selection.length;
    },
    //选择模版
    selctDemo() {
      this.dialogImageVisible = true;
    },
    selectItem(val, text) {
      this.demo = val;
      this.seltext = text;
      this.dialogImageVisible = false;
    },
    //预览
    submitForm() {
      if (!this.demo) {
        this.$message.error("请先选择模版");
      } else {
        this.look = true;
      }
    },
    //打印
    sprint() {
      if (!this.demo) {
        this.$message.error("请先选择模版");
      }
    },
    // 搜索框显示与否
    columnShow() {
      this.$refs.crud.$refs.dialogColumn.columnBox = !0;
    },
    // 搜索框显示与否
    searchShow() {
      this.$refs.crud.$refs.headerSearch.searchShow =
        !this.$refs.crud.$refs.headerSearch.searchShow;
    },
    // 列表查询
    getList(page, params) {
      this.tableLoading = true;
      fetchList(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize,
          },
          params,
          this.searchForm
        )
      )
        .then((response) => {
          this.tableData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },

    // 每页条数改变事件
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    // 当前页发生改变事件
    currentChange(current) {
      this.page.currentPage = current;
    },
    // 查询事件
    searchChange(form, done) {
      this.searchForm = form;
      this.page.currentPage = 1;
      this.getList(this.page, form);
      done();
    },
    // 刷新事件
    refreshChange() {
      this.getList(this.page);
    },
    // 导出excel
    exportExcel() {
      this.downBlobFile(
        "/ems/emsdeviceaccount/export",
        this.searchForm,
        "emsdeviceaccount.xlsx"
      );
    },
    // 改变主题颜色
    changeThme() {
      //"#02b980"
      document.getElementById("gwButton").style.backgroundColor = this.theme;
    },
  },
};
</script>

<style   lang="scss" scoped>
@import "@/styles/color.scss";
.execution-box {
  .basic-container{
   ::v-deep .el-card{
      min-height: calc(100vh - 80px);
    }
  }
}

::v-deep .el-dialog__body {
  padding: 10px 20px;
  font-size: 12px;
  .tab-box {
    margin-bottom: 10px;
    span {
      display: inline-block;
      padding: 3px 8px;
      cursor: pointer;
      margin-right: 10px;
    }
    .active {
      color: $theme;
      background: rgba($color: $theme, $alpha: 0.2);
    }
  }
}
::v-deep .dia-demo {
  background: #f6f6fb;
  display: flex;
  flex-wrap: wrap;
  max-height: 400px;
  overflow: auto;
  .demo-item {
    width: 250px;
    height: 190px;
    background: #fff;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    cursor: pointer;
    padding: 20px;
    box-sizing: border-box;
    image {
      display: inline-block;
      box-sizing: border-box;
    }
  }
  .ima-item1 {
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .code-imge {
      width: 65%;
      height: auto;
      margin: 0 auto;
    }
  }
  .ima-item2 {
    padding: 10px 20px;

    p {
      font-size: 8px;
      margin-top: 5px;
      margin-bottom: 10px;
    }
    .info {
      font-size: 10px;
      width: 100%;
      background: #192d4c;
      color: #fff;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .info-left {
        margin-bottom: 0px;
        width: 80%;
        span {
          display: inline-block;
          width: 40%;
        }
      }
      .ima-box {
        position: relative;
        width: 20%;
        height: 0;
        background: #fff;
        padding-bottom: 20%;
        .code-imge {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
      p {
        width: 100%;
        margin-top: 5px;
        display: block;
        line-height: 5px;
        display: flex;
        align-items: center;
        .sheng {
          width: 60%;
          line-height: 1;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
    .title {
      display: block;
      text-align: center;
      margin-top: 5px;
    }
  }
  .ima-item3 {
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .info-box {
      text-align: center;
      color: #324637;
      width: 55%;
      background: #324637;
      height: 85%;
      box-shadow: 0px 0px 7px 0px #eff2f5;
      .ff {
        background: #fff;
        height: 28%;
        width: 100%;
        text-align: center;
        p {
          font-size: 10px;
        }
      }
      .freen {
        height: 72%;
        .ima3-box {
          margin: 10px auto 8px;
          position: relative;
          width: 50%;
          height: 0;
          background: #fff;
          padding-bottom: 50%;
          .code-imge {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
        }
        .title {
          color: #fff;
          font-size: 10px;
        }
      }
    }
    .title {
      text-align: center;
    }
  }
  .ima-item4 {
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .info4-box {
      text-align: center;
      width: 55%;
      height: 85%;
      box-shadow:0px 0px 7px 0px #eff2f5;
      .ima4-box {
        margin: 10px auto 8px;
        position: relative;
        width: 80%;
        height: 0;
        background: #fff;
        padding-bottom: 80%;
        .code-imge {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.execution {
  .user__main{
    border-right: 1px solid red;
    padding-right: 10px;
  }
  .user__tree {
    padding-left: 10px;
  }
  .button-box {
    margin-top: 10px;
    .el-button--mini,
    .el-button--mini.is-round {
      padding: 3px 10px;
    }
    ::v-deep .el-input-group__append {
      background: $theme;
      color: #fff;
      cursor: pointer;
      border: 1px solid $theme;
    }
  }
  .demo-box {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .ima-item2 {
      width: 270px;
      height: 220px;
    }
  }
}
</style>
